<template>
  <view class="content">
    <view class="top" :style="{ height: `${heightAuto}px` }">
      <view class="top_center">
        <view class="top1">
          <!-- <view class="top" :style="{ height: `${heightAuto}px` }">
      <view class="top1" :style="{ height: `${heightAuto - 160}px` }"> -->
          <view class="top1_bj">
            <image class="top1_dog_img" src="https://yidui.jiujiefang7979.cn/static/images/share.png" mode="widthFix" style="width: 100%" lazy-load></image>
          </view>
        </view>
        <view class="xuxian">
          <view class="xuxian1"></view>
        </view>
        <view class="top2">
          <image class="image1" :src="avatarUrl || '/static/images/default.jpg'" mode="aspectFit"></image>
          <view class="text">
            <view>{{ nickName || maskPhoneNumberPartially(phone) }}</view>
            <view class="color_gray">推荐您加入</view>
          </view>
          <image class="image2" :src="srcUrl" mode="aspectFit"></image>
        </view>
      </view>
    </view>
    <view class="footer">
      <button open-type="share" size="mini">分享图片</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getWxCode } from '@/api/bgame';
import { useUserStoreHook } from '@/store/user';
const heightAuto = ref(0);
const srcUrl = ref('');
const avatarUrl = ref('');
const nickName = ref('');
const phone = ref('');
const getData = async () => {
  uni.showLoading({
    title: '获取信息中...',
    mask: true,
  });
  const res: any = await getWxCode({});
  uni.hideLoading();
  if (1 == res.result) {
    srcUrl.value = res.data.share_logo || '';
    avatarUrl.value = res.data.user?.avatar || uni.getStorageSync('user_avatarUrl');
    nickName.value = res.data.user?.nickname || uni.getStorageSync('user_nickName');
    phone.value = res.data.user?.mobile || uni.getStorageSync('phone');
  }
};
const maskPhoneNumberPartially = (phoneNumber) => {
  // 检查输入是否为11位手机号
  if (!/^\d{11}$/.test(phoneNumber)) {
    return '-';
  }

  // 使用字符串的slice方法提取前3位、替换中间4位为'*'，并连接后4位
  return phoneNumber.slice(0, 3) + '****' + phoneNumber.slice(7);
};
// 在页面的onLoad方法中调用
onLoad(async () => {
  await useUserStoreHook().getSign();
  getData();

  uni.getSystemInfo({
    success: function (res) {
      // 获取状态栏高度
      const statusBarHeight = res.statusBarHeight;
      // 获取窗口高度
      const windowHeight = res.windowHeight;
      // 计算可视区域高度（这里假设没有自定义导航栏或已经减去）
      const visibleHeight = windowHeight - statusBarHeight;
      // 将可视区域高度保存到页面的data中或进行其他处理
      heightAuto.value = visibleHeight - 80;
      console.log('heightAuto.value', visibleHeight, statusBarHeight, heightAuto.value);
    },
  });
});
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 44px);
  background-color: white;
  .top {
    padding: 20px;
    background: linear-gradient(to bottom right, #feab85, transparent), /* 右上角到左下角 */ linear-gradient(to bottom left, #feea7e, transparent), /* 左上角到右下角 */ linear-gradient(to top right, #fa9aa6, transparent), /* 右下角到左上角 */ linear-gradient(to top left, #fc7e6a, transparent); /* 左下角到右上角 */

    display: flex;
    align-items: center;
    .top_center {
      width: 100%;
      .top1 {
        background-color: white;
        border-radius: 20px;
        padding: 40px 20px 60px;
        .top1_bj {
          height: 100%;
          display: flex;
          align-items: center;

          // background: linear-gradient(to bottom, #e0fbf8, transparent, #95d131 90%);
        }
      }

      .xuxian {
        margin-left: 20px;
        margin-right: 20px;
        background-color: white;
        .xuxian1 {
          border-bottom: 2px dashed #fb7b68;
        }
      }

      .top2 {
        height: 160px;
        background-color: white;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center; //居中
        padding: 20px;
        .image1 {
          width: 180rpx;
          height: 180rpx;
          border-radius: 50%;
        }
        .image2 {
          width: 180rpx;
          height: 180rpx;
        }
        .text {
          padding-left: 10px;
          padding-right: 10px;

          .color_gray {
            margin-top: 4px;
          }
        }
      }
    }
  }

  .footer {
    width: 100%;
    height: 80px;
    position: fixed;
    bottom: 0;
    background-color: white;
    text-align: center;
    padding: 10px;
    display: flex;
    align-items: center;

    button {
      width: 80%;
      background-color: #ff9501;
      color: white;
      border-radius: 30px;
      height: 50px;
      line-height: 50px;
      font-size: 1.2rem;
      margin: 0 auto;
    }
  }
}
</style>
